<script setup>
import { onMounted, ref } from 'vue';

/* 
  获取模板 dom 元素
  // vue2方式，this.$refs.form
    
  1. 创建 空 h1Ref
  2. h1Ref 和 dom 元素绑定，等 dom 渲染完成(onMounted)，就会存放到h1Ref
  3. 可以通过 h1Ref 获取到 dom 并修改内容
*/
const h1Ref = ref(null)
console.log(h1Ref.value)

onMounted(() => {
    console.log("渲染完成", h1Ref.value)
})

const changeHTML = () => {
    h1Ref.value.innerHTML = '胡哥'
}
</script>

<template>
    <h1 ref="h1Ref">Hello vue3</h1>
    <button @click="changeHTML">我是button</button>
</template>
